
/* nunito-regular */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: regular;
  src: url('//lib.baomitu.com/fonts/nunito/nunito-regular.eot'); /* IE9 Compat Modes */
  src: local('Nunito'), local('Nunito-Normal'),
  url('//lib.baomitu.com/fonts/nunito/nunito-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//lib.baomitu.com/fonts/nunito/nunito-regular.woff2') format('woff2'), /* Super Modern Browsers */
  url('//lib.baomitu.com/fonts/nunito/nunito-regular.woff') format('woff'), /* Modern Browsers */
  url('//lib.baomitu.com/fonts/nunito/nunito-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('//lib.baomitu.com/fonts/nunito/nunito-regular.svg#Nunito') format('svg'); /* Legacy iOS */
}

// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: "Nunito", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66D9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

// Bootstrap
@import '~bootstrap/scss/bootstrap';

a { text-decoration: none; color: #636b6f; }
a:hover { text-decoration: none; color: $blue }
li { list-style: none; }
ul { padding: 0px; margin: 0px; }
.color-gray { color: gray; }
body { background-color: #fbfbfb; font-family: "微软雅黑" }
.border { border-radius: 2px; border: 1px solid #eeeeee; }
.breadcrumb { background: transparent; }
span.label { margin-right: 8px; }
.color-fff { color: #ffffff; }
.float-right { float: right; }
.lh-30 { line-height: 30px; }
.font-size-12 { font-size: 12px; }
.emoji { width: 16px; height: 16px; }
.list-group .active a { color: #FFFFFF; }

.share-box { padding-top: 10px; padding-bottom: 10px; }
.all-buy-box { margin-top: 30px; margin-bottom: 30px; }

.mt-15 { margin-top: 15px; }
.mb-15 { margin-bottom: 15px; }
.pb-15 { padding-bottom: 15px; }
.pt-15 { padding-top: 15px; }

/** 页头 */
.navbar-laravel {
  background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  .navbar-nav li {
    padding-left: 20px; padding-right: 20px;
    a.active {
      color: $blue;
    }
  }
}

/** 分页 */
.pagination {
  margin-top: 20px; margin-bottom: 20px; float: right;
}

/** 页脚 */
footer {
  background-color: #303133; color: #dddddd;
  padding-top: 30px; padding-bottom: 30px;
}
.footer-box .friend-link {
  padding-top: 20px; padding-bottom: 20px;
}

/** 登录界面 */
.login-box {
  background-color: #ffffff; padding: 10px 40px;
  border-radius: 2px; border: 1px solid #eee;
  .login-box-title {
    line-height: 80px;
  }
}
.auth-page { margin-top: 100px; margin-bottom: 100px; }

/** 首页Banner1 */
.index-banner {
  background-color: $blue; color: #ffffff;
  h1 { line-height: 120px; }
  h4 { line-height: 80px; font-size: 3rem; }
  .button { line-height: 200px; }
  .button a {
    display: inline-block; width: 300px; height: 80px;
    border-radius: 4px; border: 1px solid #ffffff;
    background-color: $blue; line-height: 80px;
    font-size: 26px; color: #ffffff;
  }
  .button a:hover {
    color: #ffffff; background-color: #ffffff;
    border: 1px solid #eeeeee; color: $blue;
  }
}
.index-banner-title {
  line-height: 100px;
}

/** 计划Banner */
.roles {
  background-color: #ffffff; padding-top: 20px;
  padding-bottom: 50px;
  .title {
    line-height: 100px; font-size: 44px; font-weight: 500;
  }
  .roles-item {
    padding-left: 20px; padding-right: 20px; margin-bottom: 20px;
    .roles-item-info {
      box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 10px 0px;
      cursor: pointer;
      .title {
        line-height: 80px; font-size: 32px; font-weight: 400;
      }
      p {
        line-height: 60px; font-size: 20px; font-weight: 300;
      }
      p.price {
        line-height: 100px; font-size: 40px; font-weight: 500;
      }
      a.buy-button {
        display: inline-block; width: 200px; height: 64px;
        line-height: 64px; font-size: 24px; color: $blue;
        border: 1px solid $blue; border-radius: 2px;
        margin-top: 20px; margin-bottom: 20px;
      }
    }
    .active {
      box-shadow: $blue 0px 2px 10px 0px; color: $blue;
      a.buy-button {
        background-color: $blue; color: #ffffff;
      }
    }
    .roles-item-info:hover {
      box-shadow: $blue 0px 2px 10px 0px; color: $blue;
      a.buy-button {
        background-color: $blue; color: #ffffff;
      }
    }
  }
}

/** 首页订阅 */
.index-subscription {
  padding-bottom: 50px; border-bottom: 1px solid #444444;
  background-color: #333333; color: #FFFFFF;
  h3 {
    line-height: 120px;
  }
}


/** 课程列表页面 */
.course-index-banner {
  background-color: $blue; color: #ffffff;
  h3 {
    line-height: 120px; font-size: 36px; font-weight: 500;
  }
}

/** 课程详情界面 */
.course-detail-banner {
  background-color: $blue; padding-top: 15px;
  padding-bottom: 20px;
}
.course-show-box {
  margin-top: 20px; margin-bottom: 20px; min-height: 444px;
  .course-video-list-box {
    background-color: #ffffff;
    .course-video-tab {
      border-bottom: 1px solid #eeeeee; text-align: center; line-height: 50px; font-size: 18px;
      .active {
        color: $blue; border-bottom: 1px solid $blue;
      }
      .course-video-tab-item {
        cursor: pointer;
      }
    }
    .tab-content-box {
      padding-top: 10px; padding-bottom: 10px;
      .intro {
        font-size: 1rem; line-height: 2rem; font-family: "微软雅黑";
        p {
          margin-top: 5px; margin-bottom: 5px;
        }
        img {
          width: 100%;
        }
      }
      .list {
        ul {
          li {
            width: 100%; height: 50px; line-height: 50px; float: left;
            white-space: nowrap; overflow: hidden; font-size: 16px;
            border-bottom: 1px solid #eeeeee; cursor: pointer;
          }
          li:hover {
            background-color: #fbfbfb;
          }
        }
      }
    }
  }
  .comment-box {
    padding-top: 20px; padding-bottom: 20px;
  }
  .comment-list-box {
    width: 100%; padding-bottom: 10px;
    tr.comment-list-item {
      border-bottom: 1px solid #eeeeee;
    }
    .user-info {
      text-align: center;
    }
    .comment-list-item {
      .nickname {
        font-size: 12px; line-height: 24px;
      }
      .avatar {
        width: 50px; height: 50px; border-radius: 50%; margin-top: 20px;
      }
    }
    .comment-content {
      line-height: 30px; font-size: 14px; padding-top: 10px;
      p {
        padding-left: 20px;
      }
      img {
        max-width: 100%;
      }
    }
  }
  .course-show-page-right{
    padding-left: 20px;
    .option {
      background-color: #ffffff; padding-top: 20px; padding-bottom: 20px;
      .join-course-btn {
        display: inline-block; width: 100%; height: 40px; line-height: 40px;
        font-size: 1rem; color: #ffffff; background-color: $blue;
        text-align: center; border-radius: 2px;
      }
      .join-course-btn:hover {
        background-color: #ffffff; color: $blue; border: 1px solid $blue;
      }
    }
    .news-student {
       margin-top: 20px; background-color: #ffffff;
      li {
        line-height: 36px;
        img {
          border-radius: 50%; width: 24px; height: 24px;
        }
      }
    }
  }
}

/** 播放界面 */
.video-box {
  background-color: #000; padding-top: 10px; padding-bottom: 10px;
  .title {
    color: #ccc; line-height: 60px; white-space: nowrap; overflow: hidden;
    font-size: 1.5rem; font-family: "微软雅黑";
  }
  .play-box {
    height: 500px;
    #player {
      height: 500px; width: 100%;
    }
  }
  .play-list {
    height: 500px; overflow-y: auto; cursor: pointer;
    li {
      width: 100%; height: 40px; float: left;
      line-height: 40px; white-space: nowrap; overflow: hidden;
      font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    li.active {
      color: $blue;
    }
  }
  .play-list::-webkit-scrollbar {
    width: 0; height: 0; display: none;
  }
}
.video-play-comment-box {
  .comment-list-box {
    width: 100%; padding-bottom: 10px;
    tr.comment-list-item {
      border-bottom: 1px solid #eeeeee;
    }
    .user-info {
      text-align: center;
    }
    .comment-list-item {
      .avatar {
        width: 50px; height: 50px; border-radius: 50%; margin-top: 20px;
      }
      .nickname {
        font-size: 12px; line-height: 24px;
      }
    }
    .comment-content {
      line-height: 30px; font-size: 14px; padding-top: 10px;
      p {
        padding-left: 20px;
      }
      img {
        max-width: 100%;
      }
    }
  }
}

/** 会员中心 */
.member {
  margin-top: 10px; margin-bottom: 20px;
  .member-left-box {
    padding-right: 20px;
    .avatar {
      padding-top: 30px; padding-bottom: 30px; background-color: #ffffff; text-align: center;
      img {
        border-radius: 50%;
      }
    }
    .nickname {
      color: #303133; font-size: 2rem; line-height: 2.5rem;
    }
    .member-left-menu {
      margin-top: 20px; background-color: #ffffff; padding: 5px 20px;
      li {
        display: inline-block; width: 100%; height: 50px;
        line-height: 50px; float: left; text-align: center;
        border-bottom: 1px solid #eeeeee;
      }
    }
  }
  .member-box {
    background-color: #ffffff; padding: 10px 20px;
    .notifications {
      padding: 0px; margin: 0px;
      li {
        border-bottom: 1px solid #fbfbfb; line-height: 30px;
      }
    }
  }
  .announcement {
    img {
      width: 100%;
    }
    p {
      line-height: 30px;
    }
  }
}

/** FAQ */
.faq-banner {
  height: 160px; background-color: $blue; color: #FFFFFF;
  h1 {
    line-height: 160px;
  }
}
.faq-body {
  margin-top: 15px; margin-bottom: 15px;
  min-height: 360px;
  .article-box {
    line-height: 30px;
    img {
      width: 100%;
    }
  }
}
.faq-body-list-box li {
  border-bottom: 1px solid #eeeeee; line-height: 36px;
}

/** 充值界面 */
.recharge-banner {
  background-color: $blue; color: #ffffff;
  h3 {
    line-height: 120px; font-size: 36px;
  }
}
.recharge-form-box {
  margin-top: 120px; margin-bottom: 120px;
}
.pay {
  padding-top:50px; padding-bottom: 50px;
}

/** 电子书阅读界面 */
.book-chapter-content {
  line-height: 40px;
  a {
    color: $blue;
  }
}